<script setup>
import { onMounted, nextTick, ref, reactive, watch, h, toRef, toRefs, onBeforeMount, onUpdated } from 'vue'
import AVue from './A.vue';
import BVue from './B.vue';
import CVue from './C.vue';
import mitt from '../assets/js/mitt';

const myComponent = {
  1: AVue,
  2: BVue
}
const num = reactive({
  page: 1
})
const num1 = reactive({
  page: 1
})
const a = ref(1)
let isA = ref(true), isB = ref(false)
const tabComponent = () => {
  // nextTick写在数据更新的上面或者下面还是有区别的
  // 对于这个写上面，A是不动的，任何时候都可以接收值，nextTick在异步队列是一定的，给的值一定是同步走完之后的
  // 区别在写上面会先执行nextTick里面的再onUpdated，写下面先onUpdated再跑nextTick里的，对于这个效果一样

  // 附带切换那种表面问题就是页面没准备好，写下面和第一种情况差不多
  // 写上面其实也一样，先nextTick再onUpdated，值给过去了，再A还再的时候给的，想给B但是还是给了最后一刻的A


  // nextTick(() => {
  //   console.log("emit");
  //   mitt.emit("test1", num.page)
  //   console.log("emited");
  // })
  // let t=isA.value
  // isA.value=isB.value
  // isB.value=t

  // nextTick(()=>{
  //   console.log("nexttick");
  // })
  // addN.value[2]=10


  num.page = num.page == 1 ? 2 : 1

  // addN.value[2]=10
  // num1.page = num1.page == 1 ? 2 : 1
  // console.log("fuzhi");

  a.value++
}
onMounted(() => {
  // console.log("onMounted");
  // mitt.emit("test1", a)


})
let obj = {
  a: 1,
}
function debounce(fn, delay) {
  // 存储定时标识符，以便清除定时器
  let timer = null
  return function () {
    if (timer) clearTimeout(timer)
    timer = setTimeout(fn(), delay)
  }
}
let objProxy = new Proxy(obj, {
  get(target, key, reveiver) {
    return target[key]
  },
  set(target, key, value, reveiver) {
    target[key] = value
    if (document.getElementById("testReactive")) {
      setTimeout(() => {
        document.getElementById("testReactive").innerHTML = value
      }, 0)
    }
    return true
  }
})
let addN = ref(["2", 3, 5])
const addNum = () => {
  // for (let i = 0; i < 100000; i++) {
  //   objProxy.a ++
  // }
  // console.log(document.getElementById("testReactive").innerHTML);

  for (let i = 0; i < 100000; i++) {
    //   // console.log(i);

    addN.value[2]++
  }
  // nextTick(() => {
  //   console.log(document.getElementById("refDom").innerHTML);
  // })
  setTimeout(() => {
    console.log(document.getElementById("refDom").innerHTML);
  }, 0)

  // tong pro wei   nex
}
onUpdated(() => {
  console.log("fu update");
})

let oData = 23
const liList = ref([1, 2, 3, 5])
const addRandom = () => {
  liList.value.splice(0, 0, 2)
},
  deleteRandom = () => {
    liList.value.splice(0, 1)
  }
</script>

<template>
  <div id="testReactive"></div>
  <button @click="tabComponent">切换</button>
  <button @click="addNum">++</button>
  <div id="refDom">{{ addN }}</div>
  {{ num1.page }}
  <!-- <KeepAlive> -->
  <div class="comp">
    <Transition>
    <component :is="myComponent[num.page]" :num="a" :data="oData"></component>
  </Transition>
  </div>
  <!-- </KeepAlive> -->
  {{ a }}
  <!-- <AVue v-if="isA" />
  <BVue v-if="isB" /> -->

  <CVue />
  <div style="margin-left: 20px;">
    <button @click="addRandom">添加</button>
    <button @click="deleteRandom">删除</button>
    <TransitionGroup name="list">
      <li v-for="item in liList" :key="item">
        {{ item }}
      </li>
    </TransitionGroup>
  </div>

</template>

<style lang='less'>
button {
  border: 1px solid greenyellow;
}

.comp {

  .v-enter-active {
    transition: all 1s ease;
    // animation: bounce-in 0.5s;
  }


  
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }

    50% {
      transform: scale(1.25);
    }

    100% {
      transform: scale(1);
    }
  }

  .v-enter-from {
    height: 0px !important;
    width: 0px !important;
    opacity: 0;

  }

}

.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.list-leave-active {
  position: absolute;
}
</style>